<template>
  <div class="header">
    <div>
      <span>国务院办公厅网民留言办理系统管理平台</span>
    </div>
    <div>
      <ul>
        <li><i class="iconfont iconloufang"></i><a href="">运行中心 · 三级账号 · 中心负责人</a></li>
        <li><i class="iconfont iconshengyin"></i><a href="">通知公告</a></li>
        <li><i class="iconfont iconshezhi"></i><a href="">管理中心</a><i class="iconfont iconxiajiantou"></i></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header'
}
</script>

<style scoped lang="less">
  .header {
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: #fff;
    font-size: 20px;
    background-color: #10549C;
    height: 70px !important;
    > div {
        display: flex;
        align-items: center;

        span {
            margin-left: 15px;
        }
    }
  }
  .header ul {
    display: flex;
    font-size: 14px
  }
  .header ul li {
    list-style: none;
    padding: 0 20px !important;
    border-right: 1px solid #fff;
  }
  .header ul li i {
    position: relative;
    top: 2px;
    right: 4px
  }
  .header ul li:first-child a {
    border-bottom: 1px solid #fff;
  }
  .header ul li:last-child a {
    padding-right: 8px;
  }
  .header ul a {
    padding: 4px 0;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
  }
</style>
